<template>
	<view class="content">
		<view class="headBox">
			<image class="headIcon " src="../../../static/logo.png" mode="widthFix"></image>
			<view class="textBox verticalCenter" @click="login">
				<view class="nameBox">
					<text>{{ userWeChatName }}</text>
					<image src="/static/me/路径 1.png" mode="widthFix" @click.prevent="quitLogin"></image>
				</view>
				<view class="idBox" style="margin-top: 6px;">
					<text>{{userWechatId}}</text>
					<image src="/static/me/路径 2.png" mode="widthFix" @click.prevent="copyData"></image>
				</view>
			</view>
		</view>
		<view class="mainBox">
			<view class="item" @click="goto('/pages/index/me/cash')">
				<image src="/static/me/资金.png" mode="widthFix"></image>
				<text>收益提现</text>
				<image src="/static/me/向右.png" mode="widthFix"></image>
			</view>
			<view class="line"></view>
			<!-- <view class="item">
				<image src="/static/me/邀请-icon.png" mode="widthFix"></image>
				<text>邀请码</text>
				<image src="/static/me/向右.png" mode="widthFix"></image>
			</view>
			<view class="line"></view> -->
			<view class="item" @click="goto('/pages/index/me/bind')">
				<image src="/static/me/手机.png" mode="widthFix"></image>
				<text>绑定手机号</text>
				<image src="/static/me/向右.png" mode="widthFix"></image>
			</view>
			<view class="line"></view>
			<view class="item" @click="goto('/pages/index/me/help')">
				<image src="/static/me/消息.png" mode="widthFix"></image>
				<text>联系客服</text>
				<image src="/static/me/向右.png" mode="widthFix"></image>
			</view>
		</view>
		<!-- 菜单栏 -->
		<menuBox></menuBox>
	</view>
</template>

<script>
	import api from '../../../api/api'
	import {
		isLoggedIn,
		getWeChatId,
		parseUserData,
		setInfo,
		quit,
		getLocalSaleUserId
	} from '../../../hook/auth.js'
	import menuBox from '/pages/components/menu.vue'
	export default {
		components: {
			menuBox
		},
		data() {
			return {
				userWeChatName: '',
				userWechatId: '',
			}
		},
		mounted() {
			this.getLocalLoginInfo()
			// //未登录，掉起登录
			// if (!isLoggedIn()) {
			// 	this.login()
			// 	console.log(123)
			// }
		},
		methods: {
			//获取本地登录信息
			getLocalLoginInfo() {
				const userData = parseUserData()
				console.log('userData', userData)
				//名字显示
				//有微信id
				if (!!userData.openid) {
					this.userWeChatName = "微信用户：" + userData.openid.substring(userData.openid.length - 5)
					this.userWechatId = "微信id：" + userData.openid.substring(0, 5)
				} else {
					//没有微信id
					this.userWeChatName = "未登录"
					this.userWechatId = "未登录"
				}
				//id显示
				if (!!userData.invite_code) {
					this.userWechatId = '邀请码：' + userData.invite_code
				}
			},

			//退出登录
			quitLogin() {
				console.log('退出登录')
				quit()
				//获取本地信息，刷新显示
				this.getLocalLoginInfo()
			},
			//复制文案到剪贴板
			copyData() {
				const self = this
				const userData = parseUserData()
				if (!!userData.invite_code) {
					uni.setClipboardData({
						data: userData.invite_code,
						success: function() {
							console.log('success');
						}
					});
				} else {
					uni.showToast({
						title: "请先绑定"
					})
				}

			},

			//页面跳转
			goto(url) {
				if (url == "/pages/index/me/cash" && !parseUserData().openid) {
					uni.showToast({
						title: "请先登录",
						icon: "error"
					})
					return
				}
				if (url == "/pages/index/me/bind") {
					const userData = parseUserData()
					//未登录
					if (!userData.openid) {
						uni.showToast({
							title: "请先登录",
							icon: "error"
						})
						return
					} else if (!!userData.parent_invite_code) {
						url = url + '?parent_invite_code=' + userData.parent_invite_code
					}
				}
				uni.navigateTo({
					url: url
				})
			},
			//登录
			async login() {
				const self = this
				if (!isLoggedIn()) {
					uni.showLoading({
						title: "正在登录"
					})
					let js_code = "";
					uni.login({
						provider: 'weixin', //获取微信的code
						success: function(loginRes) {
							console.log(loginRes);
							js_code = loginRes.code
							//访问后台获取微信openId
							api.getWeChatId({
								js_code: js_code
							}).then(res => {
								console.log('res', res)
								if (res.code == 200) {
									if (!!res.data.openid) {
										console.log("登录成功")
										setInfo(res.data)
										//获取本地信息，刷新显示
										self.getLocalLoginInfo()
										uni.hideLoading()
									}
								}
							})
						}
					});
				}
			}
		}
	}
</script>

<style scoped>
	.line {
		position: relative;
		width: 95%;
		height: 0px;
		border-bottom: 1px solid rgba(87, 87, 87, 1);
		margin: 0 auto;
	}

	.mainBox .item image:last-child {
		width: 7px;
		height: 7px;
		position: absolute;
		right: 10px;
		top: 50%;
		transform: translateY(-50%);
	}

	.item text {
		font-size: 14px;
		font-weight: 400;
		line-height: 20.27px;
		color: rgba(229, 229, 229, 1);
		vertical-align: middle;
	}

	.item image {
		width: 24px;
		height: 24px;
		vertical-align: middle;
		margin: 0 8px 0 8px;
	}

	.item {
		position: relative;
		width: 100%;
		height: 50px;
		line-height: 50px;
	}

	.mainBox {
		width: calc(100% - 20px);
		margin: 0 auto;
		border-radius: 10px;
		background: rgba(56, 56, 56, 1);
	}

	.idBox text {
		font-size: 12px;
		font-weight: 400;
		color: rgba(166, 166, 166, 1);
		vertical-align: middle;
	}

	.nameBox text {
		font-size: 16px;
		font-weight: 500;
		color: rgba(18, 205, 217, 1);
		vertical-align: middle;
	}

	.textBox {
		display: inline-block;
	}

	.nameBox image {
		width: 16px;
		height: 16px;
		margin-left: 6px;
		vertical-align: middle;
	}

	.idBox image {
		width: 9px;
		height: 9px;
		margin-left: 4px;
		vertical-align: middle;
	}

	.headIcon {
		width: 60px;
		height: 60px;
		border-radius: 50%;
		margin-top: 30px;
		margin-right: 20px;
	}

	.verticalCenter {
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
	}

	.headBox {
		position: relative;
		width: 100%;
		height: 120px;
		padding-left: 28px;
	}

	.content {
		width: 100%;
		height: 100vh;
		box-sizing: border-box;
		opacity: 1;
		background: rgba(34, 34, 34, 1);
		overflow-x: hidden;
	}
</style>